<template>
	<div>
		<el-row>
			<el-col :span="20">
				<div>
					<el-date-picker
							class="mt"
							v-model="form.times"
							type="daterange"
							value-format="yyyy-MM-dd"
							range-separator="至"
							start-placeholder="操作时间开始"
							end-placeholder="操作时间结束">
					</el-date-picker>
					<el-select v-model="form.wid" placeholder="选择仓库" clearable class="mt">
						<el-option
								v-for="item in warehouseList"
								:key="item.id"
								:label="item.name"
								:value="item.id">
						</el-option>
					</el-select>
					<el-input v-model="form.name"clearable class="mt" style="width: 20%" placeholder="商品名称"></el-input>
					<span style="color: red;font-size: 12px;padding-left: 5px;">若中心不选，则列出的是全局的商品期初/期末变化明细</span>
				</div>
			</el-col>
			<el-col :span="4">
				<div style="text-align: right" class="mt">
					<el-button type="success" @click="exportGiftData">导出</el-button>
					<el-button type="primary" @click="_giftsList()">查询</el-button>
				</div>
			</el-col>
		</el-row>
		<!--表格开始-->
		<el-table :data="tableData" v-loading="loading" style="width: 100%;margin-top: 15px;" :header-cell-style="{background:'#eef1f6',color:'#606266'}">
			<el-table-column label="商品" prop="name"></el-table-column>
			<el-table-column label="期初">
				<template slot-scope="scope">
					<span style="color: #409eff">{{ scope.row.begin_period}}</span>
				</template>
			</el-table-column>
			<el-table-column label="调拨" prop="allocate">
				<template slot-scope="scope">
					<span style="color: #67C23A">{{ scope.row.allocate}}</span>
				</template>
			</el-table-column>
			<el-table-column label="采购" prop="procurement">
				<template slot-scope="scope">
					<span style="color: #c88ad6">+{{ scope.row.procurement}}</span>
				</template>
			</el-table-column>
			<el-table-column label="出库" prop="delivery">
				<template slot-scope="scope">
					<span style="color: #fcc851">-{{ scope.row.delivery}}</span>
				</template>
			</el-table-column>
			<el-table-column label="期末" prop="end_period">
				<template slot-scope="scope">
					<span style="color: #409eff">{{ scope.row.end_period}}</span>
				</template>
			</el-table-column>
			<el-table-column label="操作方式">
				<template slot-scope="scope">
					<span style="color: #409eff;cursor: pointer" @click="waterDetail(scope.row)">查看明细</span>
				</template>
			</el-table-column>
		</el-table>

		<!--分页-->
		<Pagination @handleClickPage="currentPage" :total="total"></Pagination>

		<el-dialog :visible.sync="dialogTableVisible" width="80%" :show-close="false" :close-on-click-modal="false" @close="dialogTableVisibleClose">
			<div slot="title" class="header-title">
	            <p class="title-name">查看明细</p>
				<p class="title-info">商品的进出库流水</p>
	        </div>
			<el-table :data="gridData" :header-cell-style="{background:'#eef1f6',color:'#606266'}">
				<el-table-column property="name" label="商品"></el-table-column>
				<el-table-column property="name" label="操作方式">
					<template slot-scope="scope">
						<span style="color: #c88ad6" v-if="scope.row.type === 0">{{ scope.row.type_text }}</span>
						<span style="color: #fcc851" v-else-if="scope.row.type === 1">{{ scope.row.type_text }}</span>
						<span style="color: #67C23A" v-else>{{ scope.row.type_text }}</span>
					</template>
				</el-table-column>
				<el-table-column property="total" label="库存">
					<template slot-scope="scope">
						<span style="color: #c88ad6" v-if="scope.row.type === 0">+{{ scope.row.total }}</span>
						<span style="color: #fcc851" v-else-if="scope.row.type === 1">-{{ scope.row.total }}</span>
						<span style="color: #67C23A" v-else>{{ scope.row.total }}</span>
					</template>
				</el-table-column>
				<el-table-column property="create_username" label="操作人">
					<template slot-scope="scope">
						<span style="color: #409eff">{{ scope.row.create_username }}</span>
					</template>
				</el-table-column>
				<el-table-column property="create_time" label="时间"></el-table-column>
				<el-table-column property="remark" label="备注"></el-table-column>
			</el-table>
			<div style="position: absolute;right: 30px;top: 40px;">
				<el-button type="primary" @click="exportExcel">点击导出</el-button>
			</div>
			<!--分页-->
			<Pagination @handleClickPage="currentPageTableDetail" :total="gridTotal"></Pagination>
			<span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="dialogTableVisible = false">点击关闭</el-button>
            </span>
		</el-dialog>
	</div>
</template>

<script>
	import Pagination from '../components/pagination'
	import { warehouseList, giftsList, giftBillGift } from '../api/warehouseApi'
	import { giftBillGiftExoprt, goodsExport } from '../api/publicApi'
 	export default {
		name: "in-detail",
		data () {
			return {
				form: {
					times: [],
					wid: '',
					name: ''
				},
				warehouseList: [],
				tableData: [],
				loading: false,
				total: 0,
				page: 1, // 页数
				gridData: [],
				gridTotal: 0,
				gridPage: 1,
				currentId: '',
				dialogTableVisible: false
			}
		},
		created() {
			this._giftsList() // 商品出入列表
			this._warehouseList() // 获取仓库列表
		},
		methods: {
			async _warehouseList() {
				const res = await warehouseList()
				// console.log(res)
				this.warehouseList = res.data.list
			},
			async _giftsList() {
				let data = {p: this.page, length: 10, start_time: this.form.times[0], end_time: this.form.times[1], wid: this.form.wid, name: this.form.name}
				const res = await giftsList(data)
				console.log(res)
				this.tableData = res.data.list
				this.total = res.data.total
				this.loading = false
			},
			// 分页的 当前点击的页数
			currentPage(newPage) {
				console.log(`当前页: ${newPage}`)
				this.page = newPage
				this.loading = true
				this._giftsList() // 商品出入列表
			},
			currentPageTableDetail(newPage) {
				console.log(`当前页: ${newPage}`)
				this.gridPage = newPage
				this._giftBillGift(this.currentId)
			},
			async waterDetail(row) {
				// console.log(row)
				this.currentId = row.id
				this._giftBillGift(this.currentId)
				this.dialogTableVisible = true
			},
			async _giftBillGift(id) {
				let data = {id: id,p: this.gridPage, length: 10,start_time: this.form.times[0], end_time: this.form.times[1], wid: this.form.wid, name: this.form.name}
				const res = await giftBillGift(data)
				console.log(res)
				this.gridData = res.data.list
				this.gridTotal = res.data.total
			},
			dialogTableVisibleClose() {
				this.gridPage = 1
				this.gridData = []
				this.gridTotal = 0
			},
			async exportExcel() {
				let param = new URLSearchParams()
				param.append("p", this.gridPage)
				param.append("length", 10000)
				param.append("id", this.currentId)
				param.append("export", 1)
				const res = await giftBillGiftExoprt(param)
				console.log(res)
				const link = document.createElement('a')
				let blob = new Blob([res],{type: 'application/vnd.ms-excel'})
				link.style.display = 'none'
				link.href = URL.createObjectURL(blob)
				let num = new Date().getTime()
				console.log(num)
				link.setAttribute('download', `流水明细_${num}.xlsx`)
				document.body.appendChild(link)
				link.click()
				document.body.removeChild(link)
			},
			async exportGiftData() {
				let param = new URLSearchParams()
				param.append("p", this.page)
				param.append("length", 10000)
				param.append("start_time", this.form.times[0] ? this.form.times[0] : '')
				param.append("end_time", this.form.times[1] ? this.form.times[1] : '')
				param.append("wid", this.form.wid)
				param.append("name", this.form.name)
				param.append("export", 1)
				const res = await goodsExport(param)
				console.log(res)
				const link = document.createElement('a')
				let blob = new Blob([res],{type: 'application/vnd.ms-excel'})
				link.style.display = 'none'
				link.href = URL.createObjectURL(blob)
				let num = new Date().getTime()
				console.log(num)
				link.setAttribute('download', `商品明细_${num}.xlsx`)
				document.body.appendChild(link)
				link.click()
				document.body.removeChild(link)
			}

		},
		components: {
			Pagination
		}
	}
</script>

<style scoped lang="scss">
	.mt {
		margin-top: 5px;
	}
	.header-title {
		.title-name {
			font-size: 18px;
			color: #333;
			font-weight: 600;
			margin-bottom: 0;
		}
		.title-info {
			font-size: 11px;
			color: #7d7d7d;
			margin-bottom: 0;
			margin-top: 4px;
		}
	}
</style>
